<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="列表地址" prop="listUrl">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.listUrl"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(1)"
              >预览</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="列表选择器" prop="listSelector">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.listSelector"
              placeholder="请输入内容"
              clearable
            ></el-input>
            <p class="txt-explain"
              >列表选择器支持id和class(例如：#list>div.item)</p
            >
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(2)"
              >预览</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="列表下一页">
        <el-radio-group v-model="pageType">
          <el-radio label="1">无</el-radio>
          <el-radio label="2">指定分页</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="列表下一页">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.nextPageUrl"
              placeholder="请输入列表下一页"
              clearable
            ></el-input>
          </el-col>
          <!-- <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(2)"
              >预览</el-button
            >
          </el-col> -->
        </el-row>

        <!-- <p class="txt-explain"
          >例如:http://list.com/list_${ID}.htm, ${ID}是分页的数字</p
        > -->
      </el-form-item>

      <!-- <el-form-item label="分页ID范围" v-if="pageType == 2">
        <el-input-number
          v-model="num1"
          :min="0"
          :max="9999"
          label="描述文字"
        ></el-input-number>
        到
        <el-input-number
          v-model="num2"
          :min="0"
          :max="9999"
          label="描述文字"
        ></el-input-number>
        <p class="txt-explain">指定为数字范围,例如:100-200</p>
      </el-form-item> -->
    </el-form>

    <el-button
      type="custom"
      v-preventReClick
      @click="submitForm('form')"
      v-if="flag"
      >保 存</el-button
    >
    <el-button type="primary" plain v-preventReClick @click="handlePrev()"
      >上一步</el-button
    >
    <el-button type="primary" plain v-preventReClick @click="handleNext()"
      >下一步</el-button
    >
  </div>
</template>
<script>
import dataManage from '../Public/dataManage'
import collectPreview from '../Public/preview'
export default {
  mixins: [collectPreview, dataManage],
  data() {
    return {
      num1: 1,
      num2: 10,
      pageType: '1',
      pageUrl: '',
      form: {
        listUrl: '',
        listSelector: '',
        nextPageUrl: '',
      },
      rules: {
        listUrl: [
          { required: true, message: '请输入列表地址', trigger: 'blur' },
        ],
        listSelector: [
          { required: true, message: '请输入列表选择器', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    init(row) {
      if (row.hasOwnProperty('id')) {
        this.form = Object.assign({}, row.ruleVO)
      } else {
        this.form = this.$options.data().form
      }
      if (this.taskRow.hasOwnProperty('name')) {
        this.form = { ...this.form, ...this.taskRow.ruleVO }
      }
    },
    submitForm() {
      this.validateForm(async () => {
        await this.$store.dispatch('updateTestPaper', this.taskRow)
        this.successMsg('保存成功')
      })
    },
    //上一步
    handlePrev() {
      this.validateForm(this.$parent.lastStep)
    },
    //下一步
    handleNext() {
      this.validateForm(this.$parent.nextStep)
    },
    //预览
    handlePreview(type) {
      let data = {
        baseUrl: this.form.listUrl,
      }
      let tips = !this.form.listUrl ? '列表地址不能为空' : ''
      if (type == 2) {
        tips = !this.form.listSelector ? '列表选择器不能为空' : tips
        this.$set(data, 'pageSelector', this.form.listSelector)
      }
      tips ? this.warnMsg(tips) : this.pagePreview(data)
    },
  },
}
</script>
<style scoped lang="scss">
</style>